<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" >
<title>我的博客</title>
<link rel="stylesheet" href="css/myblogg.css" type="text/css" />
<link rel="stylesheet" href="js/blog.js" type="text/javascript" />
</head>
    
<style>
    .d2,.d2 .photo img{
        position: relative;
        width: 800px;
        height: 600px;
    }
    .d2{
        overflow: hidden;
    }
    .d2 .photo{
        position: absolute;
        width: 8000px;
        height: 600px;
    }
    .d2 .photo img{
        margin-right: -5px;
    }
    .d2 .leftbutton,.d2 .rightbutton{
        position: absolute;
        top: 40%;
        font: 60px/60px Microsoft YaHei;
        color: #00BFFF;
    }
    .d2 .leftbutton{
        left: 10px;
    }
    .leftbutton:hover{
		  color: orange;
		  cursor:pointer;
    }
	  .leftbutton:active{
		  color:#00BFFF;
    }
    .d2 .rightbutton{
        right: 10px;
    }
    .rightbutton:hover{
		  color: orange;
		  cursor:pointer;
    }
    .rightbutton:active{
		  color:#00BFFF;
    }
    .d2 .pointer{
        position: absolute;
        bottom: 40px;
        left: 33%;
    }
    .d2 .pointer span{
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 10px;
        margin-right: 40px;
        background-color: white;
    }
    .d2 .pointer .on{
        background-color: gray;
    }
    .button{
        opacity:0.3;
        cursor: pointer; 
	  }
</style>

<body>
<div id="d1">
	<div class="star" align="center"><img src="img/star.png" width="auto" height="60px" ></div>
	<div class="search" align="center"><input type="text" class="blank"></div>
	<div class="searchimg"><a href="https://www.baidu.com/"><img src="img/search.png" width="auto" height="60px"></a></div>
	<div class="text">
	  	<ul>
            <li class="progrem"><a href="#fff">项目1</a>
                <ul>
                    <li class="progrem"><a href="#">项目1a</a></li>
                    <li class="progrem"><a href="#">项目1b</a></li>
                    <li class="progrem"><a href="#">项目1c</a></li>
                </ul>
            </li>
            <li class="progrem"><a href="#">项目2</a>
                <ul>
                    <li class="progrem"><a href="#">项目2a</a></li>
                    <li class="progrem"><a href="#">项目2b</a></li>
                    <li class="progrem"><a href="#">项目2c</a></li>
                </ul>
            </li>    
            <li class="progrem"><a href="#">项目3</a>
                <ul>
                    <li class="progrem"><a href="#">项目3a</a></li>
                    <li class="progrem"><a href="#">项目3b</a></li>
                    <li class="progrem"><a href="#">项目3c</a></li>
                </ul>
            </li>
        </ul>
	</div>
</div>
<div id="d3">    
    <div class="d2">
        <div class="photo" style="left: -800px">
            <img src="img/森林地图中文.png" alt="4">
            <img src="img/储备站 20200201.png" alt="0">
            <img src="img/实验室地图地下室.png" alt="1">
            <img src="img/海岸线 20191121.png" alt="2">
            <img src="img/海关20200106.png" alt="3">
            <img src="img/森林地图中文.png" alt="4">
            <img src="img/储备站 20200201.png" alt="0">
        </div>
        <div class="leftbutton"><</div>
        <div class="rightbutton">></div>
        <div class="pointer">
            <span class="button on" index="0"></span>
            <span class="button" index="1"></span>
            <span class="button" index="2"></span>
            <span class="button" index="3"></span>
            <span class="button" index="4"></span>
        </div>
    </div>
    <div class="words">This a blog about Escape from Tarkov. Let's work together</div>   
</div>
<div id="d4">
    <div class="menu1">
    </div> 
    <div class="rank">
    </div>
</div>
    
<script>
    var d2=document.getElementsByClassName('d2')[0];
    var photo=document.getElementsByClassName('photo')[0];
    var leftbutton=document.getElementsByClassName('leftbutton')[0];
    var rightbutton=document.getElementsByClassName('rightbutton')[0];
    var button=document.getElementsByClassName('button');
    var curIndex=0;
    var toggled=true;
    function Toggle(){
        var TIMER=50;
        var time=800;
        var times=time/TIMER;
        var stepLenth=800/times;
        var leftToggle=function () {
            var t1=times;
            function leftStep(){
                photo.style.left=parseInt(photo.style.left)+stepLenth+"px";
                t1--;
                if (!t1) {
                    clearInterval(interval);
                    curIndex--;
                    if (curIndex<0) {
                        photo.style.left=parseInt(photo.style.left)-4000+"px";
                        curIndex=4;
                    };
                    toggled=true;
                };
            };
            if (toggled==true){
                toggled=false;
                button[curIndex].className="button";
                if (curIndex!=0){
                    button[curIndex-1].className="button on";
                }
                else{
                    button[curIndex+4].className="button on";
                }
                var interval=setInterval(leftStep,TIMER);
            };
        };
        var rightToggle=function(){
            var t2=times;
            function leftStep(){
                photo.style.left=parseInt(photo.style.left)-stepLenth+"px";
                t2--;
                if (!t2) {
                    clearInterval(interval);
                    curIndex++;
                    if (curIndex>4){
                        photo.style.left=parseInt(photo.style.left)+4000+"px";
                        curIndex=0;
                    };
                    toggled=true;
                };
            };
            if (toggled==true){
                toggled=false;
                button[curIndex].className="button";
                if (curIndex!=4){
                    button[curIndex+1].className="button on";
                }
                else{
                    button[curIndex-4].className="button on";
                };
                var interval=setInterval(leftStep,TIMER);
            };
      }
      this.leftToggle=leftToggle;
      this.rightToggle=rightToggle;
    };
    var toggle=new Toggle();
    leftbutton.onclick=function () {
        toggle.leftToggle();
    };
    rightbutton.onclick=function () {
        toggle.rightToggle();
    };
    for (var i = 0; i < button.length; i++) {
        button[i].onclick=function(){
            var newIndex=parseInt(this.getAttribute("index"));
            if (newIndex!=curIndex){
                var distance=-800*(newIndex-curIndex);
                photo.style.left=parseInt(photo.style.left)+distance+"px";
                button[curIndex].className="button";
                button[newIndex].className="button on";
                curIndex=newIndex;
            };
        };
    }
    var intervalo=setInterval(toggle.rightToggle,3000);
    view.onmouseover=function () {
        clearInterval(intervalo);
    }
    view.onmouseout=function () {
        intervalo=setInterval(toggle.rightToggle,3000);
    }
</script>
	
</body>
</html>
